<template>
    <div class="app-container">
        <el-card class="box-card form-container">
            <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="120px">
                <el-form-item label="菜单名称：" prop="name">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="上级菜单：">
                    <el-select v-model="form.parentId" placeholder="please select your zone">
                        <el-option label="无上级菜单" :value="0" />
                        <el-option v-for="item in parentMenus" :label="item.title" :value="item.id!" />
                    </el-select>
                </el-form-item>
                <el-form-item label="前端名称" prop="name">
                    <el-input :disabled="shoDis" v-model="form.name" />
                </el-form-item>
                <el-form-item label="前端图表">
                    <el-input :disabled="shoDis" v-model="form.icon" />
                </el-form-item>
                <el-form-item label="是否显示：">
                    <el-radio-group v-model="form.hidden">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序：">
                    <el-input v-model="form.sort" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(ruleFormRef)">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import * as http from "@/request/http"
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()

let form = ref<IMenuList>({
    hidden: 0,
    icon: "",
    name: "",
    parentId: 0,
    sort: 0,
    title: ""
})

const parentMenus = ref<IMenuList[]>([])

const paginationParams = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 30,
    parentId: 0
})

const getMenu = () => {
    http.menu.menuList(
        paginationParams.parentId,
        paginationParams.currentPage,
        paginationParams.pageSize,
    ).then(res => {
        parentMenus.value = res.data.list
        paginationParams.total = res.data.total
    })
}
getMenu()

const ruleFormRef = ref<FormInstance>()

const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, _fields) => {
        if (valid) {
            if (idNumber) {
                http.menu.menuUpdate(form.value).then(() => {
                    ElMessage.success("提交成功")
                    router.push("menu")
                    getMenu()
                })
            } else {
                http.menu.menuCreate(form.value).then(() => {
                    ElMessage.success("提交成功")
                    router.push("menu")
                    getMenu()
                })
            }
        } else {
            ElMessage.success("输入关键字")
        }
    })
}

const rules = reactive<FormRules>({
    title: [
        { required: true, message: '必填项', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '必填项', trigger: 'blur' },
    ]
})

const idNumber = parseInt(route.query.id as string)

if (idNumber) {
    http.menu.menu(idNumber).then(res => {
        form.value = res.data
        getMenu()
    })
}

const shoDis = ref(true)

watch(
    () => route.query.id,
    () => {
        if (route.query.id) {
            shoDis.value == false
        }
    }, {
    immediate: true
}
)
</script>

<style lang="less" scoped>
.form-container {
    padding: 35px 35px 15px 35px;
    margin: 0 auto;
    margin-bottom: 35px;
}
</style>

